// 新增单位弹窗表单
<template>
  <div class="addDialog basic-from">
    <el-dialog
      custom-class="small-padding-dialog"
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="1200px"
      @closed="handleClosed"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <el-form ref="form" :rules="rules" :model="formData" class="form-wrap">
        <el-form-item label="公司名称" prop="clientProviderName">
          <el-input v-halfCharCode v-model="formData.clientProviderName" :readonly="type === 'preview'" maxlength="32" placeholder="请输入公司名称" />
        </el-form-item>
        <el-form-item label="社会统一信用代码" prop="orgCode">
          <el-input v-halfCharCode v-model="formData.orgCode" placeholder="请输入社会统一信用代码" :readonly="type === 'preview'" maxlength="18" />
        </el-form-item>
        <el-form-item label="联系人" prop="providerPrincipal">
          <el-input v-halfCharCode v-model="formData.providerPrincipal" maxlength="32" :readonly="type === 'preview'" placeholder="请输入联系人" />
        </el-form-item>
        <el-form-item label="联系手机" prop="phoneNum">
          <el-input v-halfCharCode v-model.number="formData.phoneNum" maxlength="11" :readonly="type === 'preview'" placeholder="请输入联系人手机号" />
        </el-form-item>
        <el-form-item label="联系人电话" prop="telephone">
          <el-input v-halfCharCode v-model="formData.telephone" maxlength="13" :readonly="type === 'preview'" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-halfCharCode v-model="formData.address" :readonly="type === 'preview'" placeholder="请输入地址" />
        </el-form-item>
        <el-form-item label="业务范围" class="full" prop="scopeBusiness">
          <el-input v-halfCharCode v-model="formData.scopeBusiness" type="textarea" :readonly="type === 'preview'" maxlength="64" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="备注" class="full" prop="remarks">
          <el-input v-halfCharCode v-model="formData.remarks" type="textarea" :readonly="type === 'preview'" maxlength="200" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item class="full">
          <h4 class="dialogItemTitle">上传附件</h4>
          <v-upload
            v-if="dialogVisible"
            type="file"
            ref="upload"
            :busId="formData.supplierId"
            modelType="supplierManage"
            @onSuccess="onSuccess"
            v-model="uploadFileList"
            isShowFileList
            :isView="type === 'preview'"
            :autoLoadFiles="false"
            :canDelete="type === 'edit'"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button v-if="type !== 'preview'" type="primary" v-throttle="[save]" :loading="saveLoading">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { changeDepartment } from "@/views/wy-operate/api/repair.js";
import { validatePhone, validateEmail, validatePhoneTwo, validateTelephone, validateIdNo, validateTel } from '~/utils/validate'
export default {
  name: 'addDepartment',
  inject: ['initList'],
  data () {
    return {
      type: 'add',//弹窗类型，默认新增
      //弹窗开关
      dialogVisible: false,
      // 表单项
      formData: {
        clientProviderName: '',
        orgCode: '',
        name: '',
        phoneNum: '',
        telephone: '',
        address: '',
        scopeBusiness: '',
        remarks: '',
        supplierId: ''
      },
      // 校验规则
      rules: {
        clientProviderName: [{ required: true, message: '公司名称不能为空', trigger: 'blur' }],
        orgCode: [{ required: true, message: '机构代码不能为空', trigger: 'blur' }],
        providerPrincipal: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
        phoneNum: [{ required: true, message: '联系电话不能为空', trigger: 'blur' },
        { validator: validatePhone, trigger: "blur" },],
        telephone: [
          { required: true, message: '联系人电话不能为空', trigger: 'blur' },
          { validator: validatePhoneTwo, trigger: "blur" },
        ],
        address: [{ required: true, message: '地址不能为空', trigger: 'blur' }],
        scopeBusiness: [{ required: true, message: '请输入业务范围', trigger: 'blur' }],
      },
      // 保存按钮loading
      saveLoading: false,
      // 上传文件列表
      uploadFileList: [],
    }
  },
  computed: {
    // 弹窗标题计算
    dialogTitle () {
      return {
        'preview': '查看',
        'edit': '编辑',
        'add': '新增'
      }[this.type]
    },
  },
  methods: {
    //开启弹窗
    show ({ type, data = {} }) {
      if (['preview', 'edit', 'approval'].includes(type)) {
        this.formData = { ...this.formData, ...data };
        this.$nextTick(() => {
          this.$refs.upload && this.$refs.upload.getFiles(data.supplierId)
        })
      }
      this.type = type;
      this.dialogVisible = true;
    },
    // 普通提交
    save () {
      if (['edit', 'add'].includes(this.type)) {
        this.$refs.form.validate(async (valid) => {
          if (!valid) return;
          this.saveLoading = true
          if (this.uploadFileList.length) {
            this.$refs.upload.submit('supplierManage', this.formData.supplierId);
          } else {
            const res = await changeDepartment(this.formData, this.type)
            if (res.data.code == 0) {
              this.$message.success(`${this.dialogTitle}成功!`);
              this.dialogVisible = false
              this.initList({ clientProviderName: '', current: 1 })
            } else {
              this.$message.console(res.data.msg);
            }
            this.saveLoading = false
          }
        });
      }
    },
    // 上传文件提交
    async onSuccess (response, file, fileList) {
      let params = this.type == 'add' ? { ...this.formData, supplierId: response.data } : this.formData
      const res = await changeDepartment(params, this.type)
      if (res.data.code == 0) {
        this.dialogVisible = false
        this.initList({ clientProviderName: '', current: 1 })
      }
      this.saveLoading = false
    },
    // 弹窗关闭初始化
    handleClosed () {
      this.formData = {
        clientProviderName: '',
        orgCode: '',
        name: '',
        phoneNum: '',
        telephone: '',
        address: '',
        scopeBusiness: '',
        remarks: '',
        supplierId: '',
        mobile: ''
      }
      this.uploadFileList.length = 0
    }
  },
}
</script>



